<template>
    <div id="inputItemWrap">
        <div></div>
        <p>{{inputName}}</p>
        <input 
            :value="inputValue" 
            :class="inputClass" 
            @input="handleInput($event)" 
            type="text" 
            :placeholder="inputPlaceholder"
            :readonly="readonly"
        >
        <span class="img" :class="posRight" @click="clearContent" v-show="isNull" ></span>
        
        <slot name="btn1"></slot><slot name="btn2"></slot><slot></slot>
    </div>
</template>

<script>
export default {
    name: 'inputItem-PC2',
    props: ['inputName','inputPlaceholder','posRight','inputClass','inputValue', 'readonly'],
    data: function(){
        return{
            isNull: false,
        }
    },
    // watch:{
    //     inputValue: function(){
    //         console.log(1)
    //         if ( this.inputValue === '' ) {
    //             this.isNull = false
    //         }else if( this.inputValue ){
    //             this.isNull = true;
    //         }
    //     }
    // },
    
    methods:{
        //清空输入框
        clearContent(){
            this.$emit('clear-content',this.inputValue)
            // this.inputValue = ''
            this.isNull = false;
        },
        handleInput(e){
            // this.inputValue = e.target.value;
            // console.log(1)
            // this.inputValue = e.target.value
            if( this.inputValue ){
                this.isNull = true;
            }else{
                this.isNull = false
            }
            this.$emit('input',e.target.value);
        }
    }
}
</script>

<style lang="stylus" scoped>
    #inputItemWrap
        width 440px;
        height 72px;
        background-color #faf8f8;
        position relative;
        font-size 0;
        border-top 1px solid transparent;
        div
            width 3px;
            height 13px;

        p
            display block;
            font-size 14px;
            font-weight bold;
            // margin-top 18px;
            color #2b3042;
        input 
            // position abso/lute;
            width 440px;
            height 42px;
            line-height 42px;
            background-color #faf8f8;
            border none;
            outline none;
            border-bottom 1px solid #dbd3d3;
            // bottom 0;
            font-size 14px;
            color #2b3042;
            // display none;
            // left 0;
         .img 
            position absolute;
            bottom 14px;
            right 0;
            cursor pointer;

            //占位代码 删
            display inline-block;
            width 13px;
            height 13px;
            border 1px solid red;
        .changeRight
            right 117px;
            
</style>